<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div id="app">
    数学：<input type="text" v-model="mathScore"/>
    英语: <input type="text" v-model="englishScore">
    <!-- 函数要使用() -->
    总分(函数): <input type="text" v-model="sunScore()"/><br>
    <!-- 计算属性不能有() , 因为是属性，并不是函数-->
    总分（计算属性）: <input type="text" v-model="sunScore1"/>
    总分（计算属性，双向绑定）: <input type="text" v-model="sunScore2"/>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            mathScore: 80,
            englishScore: 90
        },
        // 函数，函数的特点的每次都会执行，只能单向赋值，不能双向赋值
        methods: {
            sunScore() {
                console.log("sunScore 函数计算");
                return (this.mathScore - 0) + (this.englishScore - 0);
            }
        },
        // 计算属性 ,计算属性默认是get方法，不会有set方法，如果需要双向赋值，需要添加set方法
        computed: {
            sunScore1() {
                console.log("sunScore1 函数计算");
                return (this.mathScore - 0) + (this.englishScore - 0);
            },
            sunScore2: {
                // 用来设置值
                set(newVlaue) {

                    let avgScore = newVlaue / 2;
                    this.mathScore = avgScore;
                    this.englishScore = avgScore;
                },
                // 用来获取值
                get() {
                    console.log("sunScore1 函数计算");
                    return (this.mathScore - 0) + (this.englishScore - 0);
                }

            }
        },
        // 监听数据发生改变
        watch: {
            //  当 mathScore 数据发生变化的时候，会触发当前方法
            mathScore(newValue, oldValue) {
                console.log("新数据: " + newValue + "-- 之前的数据: " + oldValue)
            }
        }
    });

    vm.$watch("englishScore", function (newValue) {
        console.log("englishScore:--" + newValue)
    })
</script>

</body>
</html>
